<template>
    <div class="pie-tool">
        <div id="main" style="width:80%;height:80%;padding:10px"></div>
    </div>
</template>


<script>
// import "./styles/skin.css";
import * as echarts from 'echarts';

export default ({
    data() {
        return{

        }
    },
    mounted(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: '60%',
            textStyle: {
            color: "#fff"
            }
            // left: 'center'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            left: '-40%',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
            }
        ]
        };

        option && myChart.setOption(option);

    }
})
</script>

<style lang="less" scoped>
.pie-tool{
    width:100%;
    height:100%;
}
</style>
